<template>
  <div class="aboutus">
    <div class="title">
      <el-divider content-position="center">平台简介</el-divider>
      <p><el-tag>超10亿人次使用</el-tag><el-tag>您的贴身法律顾问</el-tag></p>
    </div>
    <el-card class="box-card" style="margin-bottom: 20px;">
      <div class="text item">
        <el-row :gutter="110">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              为您解决各类法律咨询问题，20W+ 专业律师，超18亿人次使用<span class="large">XX法律平台</span>，提供免费法律咨询、律师在线咨询、法律法规查询、点对点法律咨询解答、在线案件委托。劳动合同律师、婚姻法律师、刑事辩护律师等为您提供在线律师咨询服务
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              找律师,问律师,上法律快车,中国法律服务平台的先行者,16年来已为近5000万的当事人找到适合的本地律师。网站拥有注册律师近21万名,覆盖婚姻、刑法、房产、合同、公司、交通、债权、劳动、知产、工程、拆迁、征地、顾问、继承、医疗、损害等
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              请律师,找案源,就上律赢惠!律赢惠是一家帮助律师寻找案源,帮助客户寻找律师的互联网法律服务平台,致力于让客户用最合适的费用请到最适合的律师,让律师更专业,让客户更放心。
            </div>
          </el-col>
        </el-row>
      </div>
      <div class='topMask square'></div><div class='topMask circular'></div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'AboutUs'
}
</script>
<style>
.aboutus .grid-content.line{
  border-right: 1px solid #ddd;
  height: 150px;
}
.aboutus .el-card__header{
  background: #545c64;
}
.aboutus .el-card__body{
  padding: 50px 20px;
}
.aboutus .el-timeline-item__wrapper{
  top: -8px;
}
.aboutus .title p .el-tag{
  margin: 0px 5px;
  cursor: pointer;
}
</style>
<style scoped>
.aboutus{
  font-size: 14px;
  text-align: left;
  padding: 0px 100px;
}
.intro{
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.text {
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  text-indent: 2em;
}
.box-card{
  position: relative;
}
.item {
  display: inline-block;
  margin: 30px 50px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.clearfix span{
  color: #fff;
  font-weight: bold;
}
.title p{
  color: #8c8888;
  font-size: 15px;
  margin-bottom: 80px;
  text-align: center;
}
.grid-content .large{
  font-size: 16px;
  color: #409EFF;
  font-weight: bold;
}
.topMask{
  width: 100px;
  height: 100px;
  background-color: rgba(68,138,255,0.2);
  transform: rotate(45deg);
  position: absolute;
}
.square{
  border-radius: 5px;
  top: 0px;
}
.circular{
  border-radius: 50%;
  top:80px;
  left: 80%;
  background-color: rgba(255, 208, 75,0.2);
}
</style>